<template>
	<view :style="{'--color':color}">
		<view class="m-top30" v-if="genre == 1">
			<view class="list bot" v-for="(item,index) in info" :key="index" @click="toDetails(item)">
				<view class="user_head flexac">
					<image :src="$imgUrls(item.headimg)" mode="aspectFill" class="wh"></image> 
				</view>
				<view class="list_content">
					<view class="d-flex a-center">
						<view class="mark m-right10" v-if="item.user_space_top == 1">顶</view>
						<text class="user_name flex-1 ellipsis">{{item.uname}}</text>
						<view class="btn h6 white" @click.stop="$common.Tel(item.phone)">电话联系</view>
					</view>
					<view class="mark m-top20" v-if="item.classname">{{ item.classname }}</view>
					<view class="Main_body" v-html="item.file_content"></view>
					<block  v-if="item.fileImgArr && item.fileImgArr.length">
					<view class="list_imgs_one" v-if="item.fileImgArr.length == 1">
						<image :src="$imgUrls(item.fileImgArr[0])" mode="widthFix" class="list_imgs_one_img m-top10" @click.stop="$previewImgs(0, item.fileImgArr)"></image> 
					</view>
					<view class="list_imgs" v-else>
						<image :src="$imgUrls(sItem)" @click.stop="$previewImgs(sIndex, item.fileImgArr)"
						       v-for="(sItem,sIndex) in item.fileImgArr" :key="sIndex"
						       mode="aspectFill" class="list_imgs_img">
						</image>
					</view>
					</block>
					<view class="row j-sb a-center ">
						<text class="addTime h6">{{item.addTime}}</text>
						<view class="d-flex a-center">
							<view class="d-flex a-center padding20">
								<view class="iconfont icon-quanziT1 color_b4 size30"></view>
								<text class="color_b4 size28 p-left8">{{item.pinlun}}</text>
							</view>
							<view class="d-flex a-center padding20" @click.stop="zanFileId(item)">
								<view class="iconfont size30" :class="item.zanok == 1?'color icon-01':'color_b4 icon-02'"></view>
								<text class="color_b4 size28 p-left8">{{item.zan}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		
		
	
		<scroll-view type="custom" class="scrollView" v-if="genre == 2">
			<grid-view type="masonry" :cross-axis-count="2" 
			          :cross-axis-gap="10" 
					  :main-axis-gap="10" 
					  :padding="gridPadding">
				<view class="gridList" v-for="(item,index) in pageData" :key="index" 
				                      v-if="item.fileImgArr && item.fileImgArr.length">
					<image :src="$imgUrls(item.fileImgArr[0])" mode="widthFix"
					      class="gridImg"></image>
				     <view class="gridBox">
						 <text class="ellipsis size26 black">{{item.file_content}}</text>
						 <view class="row j-sb a-center m-top14">
							 <view class="d-flex a-center">
								 <image :src="$imgUrls(item.headimg)" mode="aspectFill" class="gridHeadimg"></image>
								 <text class="size22 p-left10 color_64 flex-1 ellipsis">{{item.name}}</text>
							 </view>
							 <view class="d-flex a-center color_64" @click.stop="zanFileId(item)">
								 <view class="iconfont size26" :class="item.zanok == 1?'color icon-01':'color_b4 icon-02'"></view>
								 <text class="h6 color_64 p-left6">{{item.zan}}</text> 
							 </view>
						 </view>
					 </view> 
				</view>
			</grid-view>
		</scroll-view>
		

		<emptys v-if="!info.length"></emptys> 
		
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		name:'list',
		props:['pageData','classifyid','classify_info','genre'],
		data() {
			return {
				info:[],
				gridPadding:[10,10,10,10]
			}
		},
		methods: {
			zanFileId(item){
				this.$http.post({
					url: '/communityApi/zanFileId',
					data: {
						file_id: item.file_id,
						type:item.zanok==0?1:0
					}
				}).then(res => {
					if (res.code != '100') return this.$Toast(res.msg);
					let filIndex = this.info.findIndex(n=>n.file_id == item.file_id);
					item.zanok == 1?this.info[filIndex].zanok = 0:this.info[filIndex].zanok = 1
					item.zanok == 1?this.info[filIndex].zan++:this.info[filIndex].zan--;
				})
			},
			
			toDetails(item){
				this.toUrl(`Detail?file_id=${item.file_id}`)
			},
			
			
		},
		computed: {
			...mapState(['color']),
		},
		watch:{
			pageData:{
				deep:true,
				immediate: true,
				handler(newVal){
					this.info = newVal;
				}
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.list{
		width:100%;
		padding:30rpx 34rpx 10rpx 34rpx;
		display: flex;
	}
	.user_head{
		width:90rpx;
		height: 90rpx;
		overflow: hidden;
		border-radius: 8rpx;
		background-color: #ddd;
	}
	.list_content{
		flex:1;
		display: flex;
		flex-direction: column;
		padding-left:20rpx;
		.mark {
			width: fit-content;
			padding: 2rpx 6rpx;
			background: var(--color);
			border-radius: 10rpx;
			font-size: 22rpx;
			color: white;
		}
		.btn {
			padding: 6rpx 10rpx;
			background: #f78f36;
			border-radius: 30rpx;
		}
	}
	.user_name{
		color: #626b8b;
		font-size: 28rpx;
	}
	.Main_body{
		color:#000;
		font-size:30rpx;
		line-height: 40rpx;
		margin: 20rpx 0 10rpx 0;
		white-space: pre-wrap; // 保留空格和换行符
	}
	.list_imgs_one{
		width: 90%;
		max-height: 600rpx;
		overflow: hidden;
	}
	// .list_imgs_one_img{
	// 	max-width: 100%;
	// 	height: 300rpx;
	// }
	.list_imgs{
		width:100%;
		display: flex;
		flex-wrap: wrap;
	}
	.list_imgs_img{
		width:160rpx;
		height: 160rpx;
		margin-top:10rpx;
		margin-right: 10rpx;
	}
	.addTime{
		color:#b4b4b4;
	}
	
	.scrollView{
		overflow: hidden;
		box-sizing: border-box;
	}
	.gridList{
		background-color: #f9f4f8;
		display: flex;
		flex-direction: column;
		border-radius: 10rpx;
		overflow: hidden;
	}
	.gridImg{
		width:100%;
	}
	.gridBox{
		width: 100%;
		padding:20rpx;
		display: flex;
		flex-direction: column;
	}
	.gridHeadimg{
		width:32rpx;
		height: 32rpx;
		border-radius: 50%;
		overflow: hidden;
	}
</style>

